<template>
	<view class="more-container">
		<!-- 顶部用户信息区域 -->
		<view class="user-info-section">
			<!-- 顶部栏 -->
			<view class="top-bar">
				<!-- 用户头像 -->
				<view class="avatar">
					<text>{{ userInitial }}</text>
				</view>
				<!-- 设置图标 -->
				<!-- <image src="/static/images/setting.svg" class="settings-icon" mode="aspectFit"></image> -->
			</view>
			
			<!-- 用户详细信息 -->
			<view class="user-details">
				<view class="email-row">
					<text class="email">{{ userInfo.email }}</text>
					<text class="ip">{{ userInfo.ip }}</text>
				</view>
				<text class="role">{{ displayRole }}</text>
			</view>
		</view>
		
		<!-- 分割线 -->
		<view class="divider"></view>
		
		<!-- 功能菜单列表 -->
		<view class="menu-list">
			<view class="menu-item" @tap="navigateTo('customer')">
				<view class="menu-item-left">
					<image src="/static/images/customer.svg" mode="aspectFit"></image>
					<text>客户</text>
				</view>
			</view>
			
			<view class="menu-item" @tap="navigateTo('asset')">
				<view class="menu-item-left">
					<image src="/static/images/building.svg" mode="aspectFit"></image>
					<text>资产</text>
				</view>
			</view>
			
			<view class="menu-item" @tap="navigateTo('auditLog')">
				<view class="menu-item-left">
					<image src="/static/images/audit log.svg" mode="aspectFit"></image>
					<text>审计日志</text>
				</view>
			</view>
			
			<view class="menu-item" @tap="navigateTo('notification')">
				<view class="menu-item-left">
					<image src="/static/images/notification.svg" mode="aspectFit"></image>
					<text>通知</text>
				</view>
			</view>
		</view>
		
		<!-- 分割线 -->
		<view class="divider"></view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-button" @tap="logout">
			<image src="/static/images/log-out.svg" mode="aspectFit"></image>
			<text>退出</text>
		</view>
	</view>
</template>

<script>
import request from '@/utils/request.js'

export default {
	data() {
		return {
			userInfo: {
				email: '',
				ip: '',
				authority: '',
				userId: ''
			},
			// 角色映射表
			authorityMap: {
				'TENANT_ADMIN': '租户管理员',
				'CUSTOMER_USER': '客户用户',
				'SYS_ADMIN': '系统管理员'
			}
		}
	},
	
	computed: {
		userInitial() {
			return this.userInfo.email ? this.userInfo.email.charAt(0).toUpperCase() : 'T'
		},
		
		// 添加角色显示的计算属性
		displayRole() {
			return this.authorityMap[this.userInfo.authority] || this.userInfo.authority
		}
	},
	
	onLoad() {
		// 获取存储的用户信息
		const userInfo = uni.getStorageSync('userInfo')
		console.log("userInfo", userInfo)
		if (userInfo) {
			// 先保存基本信息
			this.userInfo = userInfo
			// 获取详细的用户信息
			this.fetchUserDetails(userInfo.userId)
		} else {
			uni.reLaunch({
				url: '/pages/login/login'
			})
		}
	},
	
	methods: {
		// 获取用户详细信息
		async fetchUserDetails(userId) {
			try {
				const result = await request.get(`/api/user/${userId}`)
				if (result) {
					// 更新用户信息
					this.userInfo = {
						...this.userInfo,
						...result,
						authority: result.authority || this.userInfo.authority // 保留原有的 authority 如果新数据中没有的话
					}
					// 更新存储的用户信息
					uni.setStorageSync('userInfo', this.userInfo)
				}
			} catch (error) {
				console.error('Failed to fetch user details:', error)
				uni.showToast({
					title: '获取用户信息失败',
					icon: 'none'
				})
			}
		},
		
		navigateTo(page) {
			uni.navigateTo({
				url: '/pages/more/' + page + '/' + page,
			})
		},
		
		logout() {
			// 清除存储的信息
			uni.clearStorageSync()
			
			// 跳转到登录页
			uni.reLaunch({
				url: '/pages/login/login'
			})
		}
	}
}
</script>

<style>
.more-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.user-info-section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
}

.top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.avatar {
	width: 70rpx;
	height: 70rpx;
	background-color: #673ab7;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.avatar text {
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
}

.settings-icon {
	width: 48rpx;
	height: 48rpx;
}

.user-details {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.email-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.email {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
}

.ip {
	font-size: 28rpx;
	color: #666;
}

.role {
	font-size: 24rpx;
	color: #666;
}

.divider {
	height: 1rpx;
	background-color: #e0e0e0;
	margin: 20rpx 0;
}

.menu-list {
	background-color: #fff;
	border-radius: 12rpx;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item-left {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.menu-item-left image {
	width: 48rpx;
	height: 48rpx;
}

.menu-item-left text {
	font-size: 32rpx;
	color: #333;
}

.arrow-icon {
	width: 32rpx;
	height: 32rpx;
}

.logout-button {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx 20rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.logout-button image {
	width: 48rpx;
	height: 48rpx;
}

.logout-button text {
	font-size: 32rpx;
	color: #f44336;  /* 红色 */
}
</style>
